<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        div {
            text-align: center;
            margin-top: 150px;
        }
    </style>
    <title>Title</title>
</head>
<body>
<div>
    <label>
        <input type="checkbox" id="all_select">
    </label>全选/全不选
    <label>
        <input type="checkbox" id="fan_select">
    </label>反选
    <br/>
    <label>
        <input type="checkbox" id="you">
    </label>游泳
    <label>
        <input type="checkbox" id="pa">
    </label>爬山
    <label>
        <input type="checkbox" id="kan">
    </label>看书
</div>
    <script type="text/javascript">
        let fan_select = document.getElementById("fan_select");
        let all_select = document.getElementById('all_select');
         all_select.onclick = function () {
             if (all_select.checked === true) {
                 document.getElementById('you').checked = true;
                 document.getElementById('pa').checked = true;
                 document.getElementById('kan').checked = true;
             } else {
                 document.getElementById('you').checked = false;
                 document.getElementById('pa').checked = false;
                 document.getElementById('kan').checked = false;
             }
         }

        fan_select.onclick = function () {
            let checked1 = document.getElementById('you').checked;
            let checked2 = document.getElementById('pa').checked;
            let checked3 = document.getElementById('kan').checked;
            if (fan_select.checked === true) {
                if (checked1 ===true || checked2 ===true || checked3 ===true) {

                }
            }

        }
    </script>

    </body>
    </html>
